<template>
  <van-nav-bar
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
    title="修改地址"
    placeholder
    fixed
  />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <!-- 地址 -->
      <van-field
        v-model="address"
        is-link
        readonly
        name="area"
        label="地区"
        placeholder="点击选择省市区"
        @click="addressShowArea = true"
      />
      <van-popup v-model:show="addressShowArea" destroy-on-close position="bottom">
        <van-area
          :area-list="areaList"
          :model-value="addressPickerValue"
          @confirm="addressOnConfirm"
          @cancel="addressShowArea = false"
        />
      </van-popup>
      <!-- 详细地址 -->
      <van-field
        v-model="addressDetail"
        rows="3"
        autosize
        label="详细地址"
        type="textarea"
        placeholder="请输入详细地址"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit"> 修改 </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { getUserInfoReq, userModifyReq } from '@/api/user'
import { ref } from 'vue'
import { areaList } from '@vant/area-data' //vant地区数据 需要安装@vant/area-data
let userInfo = ref({})

function getUserInfo() {
  getUserInfoReq().then((res) => {
    userInfo.value = res.data.data
    address.value = res.data.data.address
    addressDetail.value = userInfo.value.area
  })
}
getUserInfo()

//地区
let address = ref('')
let addressShowArea = ref(false)
let addressPickerValue = ref([])
function addressOnConfirm({ selectedValues, selectedOptions }) {
  addressPickerValue.value = selectedValues.length ? selectedValues[selectedValues.length - 1] : ''
  addressShowArea.value = false
  address.value = selectedOptions.map((item) => item.text).join('/')
}
//详细地址
let addressDetail = ref('')

//修改
function onSubmit() {
  userModifyReq(
    userInfo.value.birthday,
    userInfo.value.age,
    userInfo.value.avatar,
    addressDetail.value,
    address.value,
    userInfo.value.nickName,
    userInfo.value.gender,
  ).then((res) => {
    if (res.data.code === 1) {
      showSuccessToast('修改成功')
    } else {
      showFailToast(res.data.msg)
    }
  })
}
</script>

<style></style>
